<template>
  <div>
    <v-toolbar dense elevation="2">
      <div>
        <v-btn icon @click="$router.go(-1)">
          <v-icon small>mdi-arrow-expand-left</v-icon>
        </v-btn>
      </div>
      <v-spacer/>
      <div>
        订单详情
      </div>
    </v-toolbar>
    <v-main>
      <v-card class="my-2">
        <v-list>
          <v-list-item>
            <v-list-item-content>
              <v-list-item-title>{{order.address.address+order.address.addressDetails}}</v-list-item-title>
              <v-list-item-subtitle>{{order.address.name+order.address.phone}}</v-list-item-subtitle>
            </v-list-item-content>
          </v-list-item>
        </v-list>
      </v-card>
      <v-card class="my-2">
        <v-card-text>
          <v-row v-for="goods in order.orderGoodsList" :key="goods.id">
            <v-col cols="3">
              <img :src="goods.image" width="70" height="70" alt="图片">
            </v-col>
            <v-col cols="6">
              <div>{{goods.goodsName}}</div>
              <div>X{{goods.goodsNum}}</div>
            </v-col>
            <v-col cols="3">￥{{goods.price/100}}</v-col>
          </v-row>
        </v-card-text>
      </v-card>
      <v-card class="my-2">
        <v-card-title style="color: crimson">
          ￥{{order.totalPrice/100}}
          <v-spacer/>
          <div v-if="order.status==0"><v-chip label outlined color="primary" small>未支付</v-chip> </div>
          <div v-else-if="order.status==1"><v-chip label outlined color="success" small>已支付</v-chip> </div>
          <div v-else-if="order.status==2"><v-chip label outlined color="error" small>退订中</v-chip> </div>
          <div v-else-if="order.status==3"><v-chip label outlined color="error" small>已退订</v-chip> </div>
        </v-card-title>
        <v-card-text>
          <v-list>
            <v-list-item>订单编号：{{order.id}}</v-list-item>
            <v-list-item>订单金额：{{order.totalPrice/100}}</v-list-item>
            <v-list-item>支付编号：{{order.payNo}}</v-list-item>
            <v-list-item>收款方：{{order.businessName}}</v-list-item>
          </v-list>
        </v-card-text>
        <v-card-actions>
          <v-spacer/>
          <v-btn color="error" v-show="order.status==1" @click="dialog = true">退订</v-btn>
        </v-card-actions>
      </v-card>
    </v-main>
    <v-dialog width="500" v-model="dialog">
      <v-card>
        <v-card-title>确认退订吗</v-card-title>
        <v-card-actions>
          <v-spacer/>
          <v-btn color="error" @click="handleUnsubscribe">确认</v-btn>
        </v-card-actions>
      </v-card>
    </v-dialog>
  </div>
</template>

<script>
import {selectOrderByOrderId, updateOrderStatusUnsubscribe} from "@/http/api/order";

export default {
  name: "OrderDetails",
  data:()=>({
    orderId:null,
    order:null,
    dialog:false,
  }),
  computed:{
    loginCustomer(){
      return this.$store.state.customer
    },
  },
  created() {
    this.init()
  },
  methods:{
    init(){
      this.orderId = this.$route.query.orderId
      this.getOrderByOrderId()
    },
    getOrderByOrderId(){
      selectOrderByOrderId(this.orderId).then(res=>{
        this.order = res.data
      })
    },
    handleUnsubscribe(){
      updateOrderStatusUnsubscribe(this.order.id).then(res=>{
        this.$breadstick.notify(res.data)
        this.init()
        this.dialog = false
      })
    }
  }
}
</script>

<style scoped>

</style>